<template>
  <div>
    <top/>
    <div class="main">
        <el-aside class="aside_main"  width="200px">
          <div>
              <div @click="toCategory('BIRDS')" class="product_a">
                <img class="" src="../assets/images/fish_icon.gif" alt="BIRDS">
              </div>
            <div class="text2">Saltwater, Freshwater</div>
          </div>
          <div>
            <div @click="toCategory('DOGS')" class="product_a">
              <img class="" src="../assets/images/dogs_icon.gif" alt="DOGS">
            </div>
            <div class="text2">Various Breeds</div>
          </div>
          <div>
            <div @click="toCategory('CATS')" class="product_a">
              <img class="" src="../assets/images/cats_icon.gif" alt="CATS">
            </div>
            <div class="text2">Various Breeds, Exotic Varieties</div>
          </div>
          <div>
            <div @click="toCategory('REPTILES')" class="product_a">
              <img class="" src="../assets/images/reptiles_icon.gif" alt="REPTILES">
            </div>
            <div class="text2">Lizards, Turtles, Snakes</div>
          </div>
          <div>
            <div @click="toCategory('BIRDS')" class="product_a">
              <img class="" src="../assets/images/birds_icon.gif" alt="BIRDS">
            </div>
            <div class="text2">Exotic Varieties</div>
          </div>
        </el-aside>
      
        <el-main>
          <div id="MainImage" class="mainImage">
            <div id="MainImageContent" >
              <!-- <div id="mytitle" v-show="showTitle" :style="{ left: titleLeft, top: titleTop }">
                <ul id="productShowList">
                  <li v-for="product in productList" :key="product.productId" class="productAutoItem">
                    {{ product.productId }}: {{ product.name }}
                  </li>
                </ul>
              </div> -->
              <map name="estoremap">
                  <area alt="BIRDS" coords="97,4,380,353" shape="RECT" @click="toCategory('BIRDS')" />
                  <area alt="FISH" coords="4,264,97,353" shape="RECT" @click="toCategory('FISH')" />
                  <area alt="DOGS" coords="67,354,144,476" shape="RECT" @click="toCategory('DOGS')" />
                  <area alt="REPTILES" coords="189,387,261,524"  shape="RECT" @click="toCategory('REPTILES')" />
                  <area alt="CATS" coords="318,354,381,476" shape="RECT" @click="toCategory('CATS')"/>
                  <area alt="BIRDS" coords="381,264,475,353" shape="RECT" @click="toCategory('BIRDS')"/>
              </map>
              <img height="490" src="../assets/images/splash.gif" style="align:middle;" usemap="#estoremap" width="485" />
            </div>
          </div>
        </el-main>
</div>
<bottom/>
</div>

</template>

<script>
import bottom from '../components/Bottom.vue'
import top from '../components/Top.vue'
export default {
  components: { top , bottom },
  name: 'Home',
  methods: {
    toCategory(categoryId){
      this.$router.push({
        name: 'Category',
        params: {categoryId}
      })
    },


    handleMouseEnter(e) {
      this.showTitle = true;
      this.titleLeft = e.pageX + 10 + "px";
      this.titleTop = e.pageY + 10 + "px";

      // AJAX 请求
      const categoryId = e.target.getAttribute("alt");
      fetch(`url`)
        .then(response => response.json())
        .then(data => {
          this.productList = data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    handleMouseLeave() {
      this.showTitle = false;
    },
  }
};
</script>

<style scoped>
.main{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
}
.aside_main{
  height: auto;
  overflow: hidden;
  transform: translateY(10%);
  padding: 20px;
  padding-left: 30px;

}
.product_a{
  height:30px;
  width:80px;
}
.mainImage{
    margin-left:100px;
    text-align: center;
    transform: translateX(-20%);
    padding-top: 50px;
}
.text2{
  padding-left: 10px;
  padding-bottom: 15px;
}
</style>